<template>
  <div class="app-container calendar-list-container user-container">
    <div class="filter-container">
      <el-form>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="8">
            <el-form-item label="参数名称">
              <el-input v-model="queryCondition.remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="参数ID">
              <el-input v-model="queryCondition.parameterId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="模块名">
              <el-input v-model="queryCondition.module"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="0" class="cutOffLine">
          <div class="buttonGroup">
            <el-button size="small" type="primary" @click="queryData">
              <icon name="search"></icon>
              查询
            </el-button>
            <el-button size="small" type="primary" @click="handleAdd">
              <icon name="plus"></icon>
              新增
            </el-button>
            <el-button size="small" type="danger" @click="refreshParam">
              <icon name="refresh"></icon>
              刷新
            </el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <el-table
      v-loading="loading"
      :data="dataList"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      style="width: 100%"
      border
      highlight-current-row
      @current-change="handleCurrentChange"
      :row-class-name="tableRowClassName"
      ref="singleTable">
      <el-table-column
        align="left"
        label=''
        width="50px"
        v-if="needDisplayChangeOrder">
        <template slot-scope="scope">
          <div v-if="scope.$index !== 0">
            <el-button
              plain
              class="up"
              type="primary"
              size="mini"
              icon="el-icon-arrow-up"
              @click="handleUp(scope.$index, dataList)">
            </el-button>
          </div>
          <div v-if="scope.$index !== dataList.length-1">
            <el-button
              plain
              class="down"
              type="primary"
              size="mini"
              icon="el-icon-arrow-down"
              @click="handleDown(scope.$index, dataList)">
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(column) in layout"
        :label="column.label"
        :key="column.key">
        <template slot-scope="scope">
          <el-input v-if="scope.row.editing"
            type="textarea"
            autosize
            v-model="editData[column.key]"
            :placeholder="column.label">
          </el-input>
          <span v-else>{{scope.row | combination(column.key)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        label="操作"
        width="165px">
        <template slot-scope="scope">
          <div class="operate-groups" v-if="scope.row.editAble">
            <el-button
              type="primary"
              size="small"
              v-if="!scope.row.editing"
              icon="el-icon-edit-outline"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              type="primary"
              size="small"
              v-if="scope.row.editing"
              icon="el-icon-success"
              @click="handleSave(scope.$index, scope.row)">保存
            </el-button>
            <el-button
              size="small"
              type="danger"
              v-if="!scope.row.editing"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
            <el-button
              size="small"
              type="warning"
              v-if="scope.row.editing"
              icon="el-icon-warning"
              @click="handleCancel(scope.$index, scope.row)">取消
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page.current"
                   :page-size="page.size"
                   :total="page.total"
                   @current-change="handleCurrentChange"
                   class="paging"
                   layout="total, prev, pager, next, jumper"
                   small>
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      /** ===========只需要配置此处============= **/
      apiName: {
        queryLayout: this.apiType.sys.queryParameterLayout,
        queryData: this.apiType.sys.queryParameter,
        queryAll: this.apiType.sys.queryParameterAll,
        addData: this.apiType.sys.addParameter,
        updateData: this.apiType.sys.updateParameter,
        deleteData: this.apiType.sys.deleteParameter,
        refreshParameter: this.apiType.sys.refreshParameter
      },
      needDisplayChangeOrder: false,
      moduleName: '系统参数',
      primaryKey: 'parameterId',
      // 搜索信息
      queryCondition: {
        remark: '',
        parameterId: '',
        module: ''
      },
      /** ===========只需要配置此处============= **/
      layout: [],
      defaultData: {
        id: undefined,
        name: '',
        condition: '',
        period: '',
        service: '',
        function: '',
        order: ''
      },
      editData: {},
      dataList: [],
      currentRow: {},
      // 分页信息
      page: {
        total: 0,
        current: 1,
        size: 10
      },
      formLabelWidth: '100px',
      loading: false
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.page = {
        total: 0,
        current: 1,
        size: 20
      }
      this.loading = false
      this.queryLayout()
      this.queryAll()
    },
    handleCurrentPageChange (val) {
      this.page.current = val
      this.queryData()
    },
    handleSizeChange (val) {
      this.page.size = val
      this.queryData()
    },
    queryLayout () {
      this.fetch(this.apiName.queryLayout, null, null, respData => {
        for (let key in respData.data) {
          const keyValue = {
            key: '',
            label: ''
          }
          keyValue.label = respData.data[key]
          keyValue.key = key
          this.layout.push(keyValue)
        }
      }, null)
    },
    queryAll () {
      const _this = this
      const param = {
        currentPage: this.page.current,
        pageSize: this.page.size
      }
      _this.fetch(this.apiName.queryAll, param, null, respData => {
        _this.dataList = respData.data.info
        _this.page.total = parseInt(respData.data.totalSize)
        _this.editData = _this.defaultData
      }, null)
    },
    queryData () {
      const _this = this
      const param = {
        currentPage: this.page.current,
        pageSize: this.page.size
      }
      _this.fetch(this.apiName.queryData, param, _this.queryCondition, respData => {
        _this.dataList = respData.data.info
        _this.page.total = parseInt(respData.totalSize)
        _this.editData = _this.defaultData
      }, null)
    },
    addData (data) {
      const _this = this
      _this.fetch(this.apiName.addData, null, data, function (responseData) {
        _this.$message({
          showClose: true,
          message: _this.moduleName + '新增条目成功',
          type: 'success',
          duration: 2000
        })
        _this.queryData()
      }, null, false)
    },
    updateData (data) {
      const _this = this
      _this.fetch(this.apiName.updateData, null, data, function (responseData) {
        _this.$message({
          showClose: true,
          message: _this.moduleName + '修改成功',
          type: 'success',
          duration: 2000
        })
        _this.queryData()
      }, null, false)
    },
    deleteData (id) {
      const _this = this
      let absolute = '1'
      this.layout.forEach(l => {
        if (l.key === 'valid') {
          absolute = '0'
        }
      })
      const param = {
        id: id,
        absolute: absolute
      }
      _this.fetch(this.apiName.deleteData, param, function (responseData) {
        _this.dataList = responseData.body
        _this.page.total = parseInt(responseData.totalSize)
        _this.queryData()
      }, null, false)
    },
    tableRowClassName ({ row, rowIndex }) {
      row.index = rowIndex
      row.id = row[this.primaryKey]
    },

    // 上下自由调整表格数据
    swapItems (arr, index1, index2) {
      const temp = arr[index1].order
      arr[index1].order = arr[index2].order
      arr[index2].order = temp
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      this.updateData(arr[index1])
      this.updateData(arr[index2])
      return arr
    },
    handleUp ($index, dataList) {
      if ($index === 0) {
        return
      }
      this.swapItems(dataList, $index, $index - 1)
    },
    handleDown ($index, dataList) {
      if ($index === dataList.length - 1) {
        return
      }
      this.swapItems(dataList, $index, $index + 1)
    },
    // 编辑
    handleEdit ($index, row) {
      this.editData = { ...row }
      this.$set(this.dataList[$index], 'editing', true)
    },
    // 保存
    handleSave ($index, row) {
      this.$set(this.dataList[$index], 'editing', false)
      if (row.add) {
        this.addData(this.editData)
      } else {
        this.updateData(this.editData)
      }
    },
    // 取消
    handleCancel ($index, row) {
      this.$set(row, 'editing', false)
      this.editData = this.defaultData
    },
    // 新增一条模板数据
    handleAdd () {
      if (this.dataList[this.dataList.length - 1].add) {
        return
      }
      this.dataList = this.dataList || []
      this.dataList.push({
        ...this.defaultData,
        editing: true,
        editAble: true,
        add: true
      })
      this.dataList[this.dataList.length - 1].order = this.dataList.length
      this.$refs.singleTable.setCurrentRow(this.dataList[this.dataList.length - 1])
    },
    // 删除
    handleDelete ($index, row) {
      this.$confirm('此操作将永久删除该条模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteData(row.id)
        this.dataList.splice($index, 1)
        this.$message({
          type: 'success',
          message: this.moduleName + '条目删除成功!'
        })
      }).catch((err) => {
        this.$message({
          type: 'error',
          message: err
        })
      })
    },
    handleCurrentChange (currentRow, oldCurrentRow) {
      if (oldCurrentRow !== null && oldCurrentRow !== currentRow) {
        this.$set(oldCurrentRow, 'editAble', false)
        this.handleCancel(null, oldCurrentRow)
      }
      if (currentRow !== null) {
        if (currentRow.index !== this.dataList[this.dataList.length - 1].index && this.dataList[this.dataList.length - 1].add) {
          this.dataList.splice(this.dataList.length - 1, 1)
        }
        this.$set(currentRow, 'editAble', true)
        this.currentRow = currentRow
      }
    },

    /** 新增函数 **/
    refreshParam () {
      const _this = this
      const param = {
        cacheType: 'PARAM'
      }
      _this.fetch(this.apiName.refreshParameter, param, null, function (responseData) {
        _this.$alert('系统参数已刷新', '', {
          confirmButtonText: '确定',
          center: true
        })
      }, null, false)
    }
  }

}
</script>

<style>
  .bindTransfer {
    display: inline-block;
  }

  .bindTransfer .el-transfer-panel {
    width: 350px;
  }

  .bindTransfer .transfer-footer {
    margin-left: 20px;
  }

</style>
